<template>
    <div v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <OptCostDetails ref="costRef" @getDataList="getDataList" />
        <AddUdVideo ref="addRef" @getDataList="getDataList" />
        <div class="com_box pd_20">
            <div class="flexbox flexcenter flexbetween">
                <span class="font_16 color_01">数据汇总</span>
                <div class="font_13 color_02 flexbox flexcenter">
                    <span>优化师：{{$route.query.nickname}}</span>
                    <span class="div_line"></span>
                    <span>数据日期：{{$route.query.year}}年{{$route.query.month}}月</span>
                </div>
            </div>
            <div class="consume_count flexbox flexcenter mt_20">
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M8 14.6663C10.7614 14.6663 13 12.4278 13 9.66634C13 4.99967 8 1.33301 8 1.33301C8 1.33301 3 4.99967 3 9.66634C3 12.4278 5.23857 14.6663 8 14.6663Z" stroke="#4475FF" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M3 9.66661C3 12.428 5.23857 14.6666 8 14.6666C10.7614 14.6666 13 12.428 13 9.66661C13 9.66661 10 10.6666 8 9.66661C6 8.66661 3 9.66661 3 9.66661Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.2" stroke-linejoin="round" />
                        </svg>
                        <span>总消耗</span>
                    </div>
                    <div class="consume_num">
                        {{countData.stat_cost}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.5 2C5.1863 2 2.5 4.6863 2.5 8C2.5 11.3137 5.1863 14 8.5 14C11.8137 14 14.5 11.3137 14.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 5C6.84313 5 5.5 6.34313 5.5 8C5.5 9.65687 6.84313 11 8.5 11C10.1569 11 11.5 9.65687 11.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 7.99988L10.6 5.89795" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10.6001 3.8088V5.9H12.7085L14.5001 4.10007H12.4012V2L10.6001 3.8088Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linejoin="round" />
                        </svg>
                        <span>总消耗目标</span>
                    </div>
                    <div class="consume_num">
                        {{countData.target_cost}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.5 2C5.1863 2 2.5 4.6863 2.5 8C2.5 11.3137 5.1863 14 8.5 14C11.8137 14 14.5 11.3137 14.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 5C6.84313 5 5.5 6.34313 5.5 8C5.5 9.65687 6.84313 11 8.5 11C10.1569 11 11.5 9.65687 11.5 8" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8.5 7.99988L10.6 5.89795" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M10.6001 3.8088V5.9H12.7085L14.5001 4.10007H12.4012V2L10.6001 3.8088Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linejoin="round" />
                        </svg>
                        <span>每日剩余总目标任务</span>
                    </div>
                    <div class="consume_num">
                        {{countData.target_cost_remain}}
                    </div>
                </div>
                <div class="consume_c_item">
                    <div class="flexbox flexcenter consume_name">
                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.5 8C1.5 6.89543 2.39543 6 3.5 6H13.5C14.6046 6 15.5 6.89543 15.5 8C15.5 9.10457 14.6046 10 13.5 10H3.5C2.39543 10 1.5 9.10457 1.5 8Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.2" />
                            <path d="M4.49981 6.6971L4.49988 9.19722M6.99979 6.69699L6.99981 9.19722M9.49988 6.6971L9.49983 9.19732" stroke="white" stroke-width="1.2" stroke-linecap="round" />
                        </svg>
                        <span>完成总进度</span>
                    </div>
                    <div class="consume_num flexbox flexcenter">
                        <el-progress type="circle" style="margin-right:5px" width="26" color="#4475ff" :percentage="countData.progress" stroke-width="4" :show-text="false"></el-progress>
                        {{countData.progress}}%
                    </div>
                </div>
            </div>
        </div>
        <div class="com_box mt_12 pd_20">
            <div class="flexbox flexcenter flexbetween">
                <span class="font_16 color_01">消耗数据</span>
                <el-button plain size="small" class="plain_blue" icon="el-icon-circle-plus-outline" @click="addUdVedio">UD短视频</el-button>
            </div>
            <el-table :data="listData" class="com_table mt_20">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据</div>
                </div>
                <el-table-column prop="brand_name" label="品牌名称" min-width="150" fixed="left">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter">
                            <span class="text_head">{{scope.row.brand_name | keepOneNumS}}</span>
                            {{scope.row.brand_name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="channel" label="投放渠道" min-width="110">
                    <template slot-scope="scope">
                        {{filters.chanelName2(scope.row.channel)}}{{filters.sceneFilter(scope.row.business_scene)}}
                    </template>
                </el-table-column>
                <el-table-column prop="target_cost" label="消耗目标" min-width="150">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter popper_hover">
                            {{scope.row.target_cost}}
                            <el-popover placement="top" width="160" @show="showCost(scope.row.target_cost)">
                                <el-input v-model="costValue" placeholder="" size="small"></el-input>
                                <div style="text-align: right; margin-top: 10px">
                                    <el-button size="mini" type="text" @click="hidePop()">取消</el-button>
                                    <el-button type="primary" size="mini" @click="editCostTarger(scope.row)">确定</el-button>
                                </div>
                                <span class="icon_btn flexbox flexcenter flexjust" slot="reference">
                                    <img src="../../assets/img/edit_icon2.svg" alt="">
                                </span>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="target_cost_remain" label="每日剩余目标任务" min-width="160">
                </el-table-column>
                <el-table-column prop="free_cost" label="随心推" min-width="140">
                </el-table-column>
                <el-table-column prop="advertiser_cost" label="账户消耗" min-width="110">
                </el-table-column>
                <el-table-column prop="stat_cost" label="总消耗" min-width="140">
                    <template slot-scope="scope">
                        <div class="flexbox flexcenter cost_icon" @click="costDetails(scope.row)">
                            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3.5 10H21.5V19C21.5 19.5523 21.0523 20 20.5 20H4.5C3.94772 20 3.5 19.5523 3.5 19L3.5 10Z" fill="#4475FF" />
                                <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 3H9.5V5.00001L15.5 5.00001V3H17.5V5.00001L20.5 5.00002C21.0523 5.00002 21.5 5.44773 21.5 6.00002V9L3.5 8.99998V6C3.5 5.44772 3.94772 5 4.5 5L7.5 5V3Z" fill="#4475FF" />
                                <path d="M12.0129 16.1851C12.0129 15.4807 11.6337 15.1243 11.2898 14.9006C11.6073 14.7099 11.9423 14.395 11.9423 13.7486C11.9423 12.7293 11.087 12 9.92307 12C8.80321 12 7.90379 12.6713 7.90379 13.7818H9.34991C9.34991 13.4254 9.62326 13.2265 9.92307 13.2265C10.2229 13.2265 10.4962 13.4171 10.4962 13.7901C10.4962 14.0552 10.3287 14.3453 9.89661 14.3453H9.69381V15.5221H9.89661C10.2846 15.5221 10.5668 15.7873 10.5668 16.1436C10.5668 16.5663 10.3022 16.7735 9.92307 16.7735C9.56154 16.7735 9.27937 16.5663 9.27937 16.1519H7.83325C7.83325 17.4779 8.88257 18 9.92307 18C11.0253 18 12.0129 17.4199 12.0129 16.1851Z" fill="white" />
                                <path d="M16.8333 16.1602V13.8398C16.8333 12.6215 15.8545 12 14.814 12C13.7735 12 12.7947 12.6215 12.7947 13.8398V16.1602C12.7947 17.3785 13.7735 18 14.814 18C15.8545 18 16.8333 17.3785 16.8333 16.1602ZM15.3871 16.1685C15.3871 16.5829 15.1226 16.7735 14.814 16.7735C14.5054 16.7735 14.2408 16.5829 14.2408 16.1685V13.8398C14.2408 13.4254 14.5054 13.2265 14.814 13.2265C15.1226 13.2265 15.3871 13.4254 15.3871 13.8398V16.1685Z" fill="white" />
                            </svg>
                            <span class="cost_font">{{scope.row.stat_cost}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="progress" label="完成进度" width="170">
                    <template slot-scope="scope">
                        <el-progress stroke-width="8" :percentage="scope.row.progress | keepNone" color="#4475FF"></el-progress>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import OptCostDetails from "./OptCostDetails";
import AddUdVideo from "./AddUdVideo";
import filters from "../../assets/js/filters";
export default {
    name: "",
    data() {
        return {
            visible: false,
            loading: false,
            costValue: 0,
            queryInfo: {
                year: this.$route.query.year,
                month: this.$route.query.month,
                author: this.$route.query.author,
            },
            countData: {},
            listData: [],
        };
    },
    created() {
        this.getDataList();
    },
    methods: {
        //获取列表
        async getDataList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/costData",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.countData = res.data.total;
                this.listData = res.data.list
            }
        },

        //修改消耗目标
        async editCostTarger(row) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "launch/cost/editTargetCost",
                {
                    channel: row.channel,
                    business_scene: row.business_scene,
                    brand_id: row.brand_id,
                    author: this.$route.query.author,
                    target_cost: this.costValue,
                    year: this.$route.query.year,
                    month: this.$route.query.month,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.hidePop();
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.getDataList();
            }
        },

        hidePop() {
            document.body.click()
        },

        // 显示
        showCost(cost) {
            this.costValue = cost;
        },

        costDetails(row) {
            this.$refs.costRef.dialogVisible = true;
            this.$refs.costRef.queryInfo.channel = row.channel;
            this.$refs.costRef.queryInfo.business_scene = row.business_scene;
            this.$refs.costRef.queryInfo.brand_id = row.brand_id;
            this.$refs.costRef.baseInfo.brand_name = row.brand_name;
            this.$refs.costRef.getDataList();
        },

        // ud短视频
        addUdVedio(){
            this.$refs.addRef.dialogVisible = true;
            this.$refs.addRef.getBrandList();
            this.$refs.addRef.getTime(this.$route.query.year,this.$route.query.month);
        }
    },
    components: {
        OptCostDetails,
        AddUdVideo
    },
};
</script>


<style scoped>
.cost_font {
    color: #4475ff;
    margin-left: 5px;
}
.div_line {
    height: 8px;
    border-left: 1px solid #ebebeb;
    margin: 0 10px;
}
.cost_icon {
    cursor: pointer;
}
</style>
